<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">

    <title></title>
    <style>
        #parent{
            height: 200px;
            width: 200px;  /*定宽*/
            position: relative;  /*父相*/
            background-color: #f00;
        }
        #son{
            position: absolute;  /*子绝*/
            left: 50%;  /*父元素宽度一半,这里等同于left:100px*/
            transform: translateX(-50%) translateY(50%);  /*自身宽度一半,等同于margin-left: -50px;*/
            width: 100px;  /*定宽*/
            height: 100px;
            background-color: #00ff00;
        }
    </style>
</head>
<body>

<div id="parent">
    <div id="son">
        儿子
    </div>
</div>
</body>
</html>